$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .t {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: $fontSize_54;
      font-weight: 700;
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-50%);
      z-index: 10;
      transition: all 600ms;
      img{
        width: 60/$f+vw;
      }
      &:hover {
        transform:translateX(-50%) rotate(180deg);
      }
    }
  }

  .types {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: center;

    span {
      width: 1px;
      height: 1.5vw;
      background: #E6E6E6;
    }

    a {
      width: 15vw;
      color: #666;
      font-size: $fontSize_16;
      text-align: center;
      position: relative;
      padding: 1.5vw 0;
      transition: all 600ms;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #79C536;
        transition: all 600ms;
      }

      &:hover {
        color: #79C536;
      }
    }

    .active {
      color: #79C536;

      &::after {
        width: 100%;
      }
    }
  }

  .section1{
    position: relative;
    z-index: 1;
    overflow: hidden;
    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: #F6FAF6;
        width: 100%;
        height: 503/$f+vw;
        z-index: -1;
    }
    img{
        object-fit: cover;
    }
    .wrap{
        width: 1200/$f+vw;
        margin: 3vw auto 5.7vw;
        .title{
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin: 0 0 40/$f+vw;
            .l{
                display: flex;
                .color{
                    width: 35/$f+vw;
                    height: fit-content;
                    object-fit: cover;
                    margin: 26/$f+vw 42/$f+vw 0 0;
                }
                .pick{
                    color: rgba(17, 31, 44, 0.85);
                    width: 737/$f+vw;
                    font-size: 20/$f+vw;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 36/$f+vw; /* 180% */
                }
            }
            .r{
                color: rgba(17, 31, 44, 0.85);
                font-family: "Microsoft YaHei";
                font-size: 24/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: 24/$f+vw; /* 100% */
            }
        }
        .content{
            display: flex;
            justify-content: space-between;
            .big{
                width: 701/$f+vw;
                height: 411/$f+vw;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    transition: all .6s;
                    &:hover{
                        transform: scale(1.05);
                    }
                }
            }
            .small{
                width: 479/$f+vw;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .flex{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .img{
                        width: 251/$f+vw;
                        height: 192/$f+vw;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                            transition: all .6s;
                            &:hover{
                                transform: scale(1.05);
                            }
                        }
                    }
                    .img_2{
                        width: 208/$f+vw;
                    }
                }
                .img2{
                    width: 100%;
                    height: 199/$f+vw;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        transition: all .6s;
                        &:hover{
                            transform: scale(1.05);
                        }
                    }
                }
            }
        }
    }
  }

  .section2{
    overflow: hidden;
    .wrap{
      width: 1200/$f+vw;
      margin: 0 auto 4.5vw;
      .title{
        margin: 0 0 55/$f+vw;
        h1{
          color: #111F2C;
          font-size: 42/$f+vw;
          font-style: normal;
          font-weight: 500;
          // line-height: 32/$f+vw; /* 76.19% */
          margin: 0 0 22/$f+vw;
        }
        p{
          color:  rgba(17, 31, 44, 0.85);
          font-family: "Source Han Sans CN";
          font-size: 16/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 28/$f+vw; /* 175% */
        }
      }
      .content{
        .cut{
          display: flex;
          justify-content: space-between;
          margin: 0 0 42/$f+vw;
          height: 86/$f+vw;
          border: 1px solid #29B553;
          .list{
            width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color:  rgba(17, 31, 44, 0.85);
            font-size: 20/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 20/$f+vw; /* 100% */
            transition: all .6s;
            position: relative;
            cursor: pointer;
            &::after{
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%);
              opacity: 0;
              transition: all .6s;
              z-index: -1;
            }
            &.on{
              &::after{
                opacity: 1;
              }
              color: #fff;
            }
          }
        }
        @keyframes animate_y {
          0%{
            transform: translateY(20px);
            opacity: 0;
          }
          100%{
            opacity: 1;
            transform: translateY(0);
          }
        }
        .flex{
          .matter{
            display: none;
            &.on{
              display: block;
              animation: .6s animate_y ease forwards;
            }
            .item{
              background: #F6FAF6;
              &:not(:last-child) {
                margin: 0 0 15/$f+vw;
              }
              .show{
                height: 86/$f+vw;
                padding: 0 25/$f+vw 0 53/$f+vw;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(17, 31, 44, 0);
                transition: .6s;
                .l{
                  display: flex;
                  align-items: center;
                  p{
                    color: rgba(17, 31, 44, 0.85);
                    font-size: 18/$f+vw;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 18/$f+vw; /* 90% */
                    &:nth-child(1) {
                      min-width: 180/$f+vw;
                      transition: all .3s;
                    }
                    &:nth-child(2) {
                      color: rgba(17, 31, 44, 0.85);
                      font-size: 18/$f+vw;
                      margin: 0 0 0 325/$f+vw;
                    }
                  }
                }

                img{
                  width: 24/$f+vw;
                  transform: rotate(-90deg);
                  transition: all .6s;
                }
                
              }
              .hide{
                overflow: hidden;
                display: none;
                &>div{
                  margin: 25/$f+vw 0 25/$f+vw 53/$f+vw;
                  span{
                    color: #333;
                    font-size: 18/$f+vw;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 35/$f+vw; /* 194.444% */
                  }
                  p{
                    color: #666;
                    font-size: 18/$f+vw;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 35/$f+vw; /* 194.444% */
                  }
                  a{
                    color: #79C536;
                    font-size: 16/$f+vw;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 35/$f+vw; /* 218.75% */
                    text-decoration-line: underline;
                    margin: 26/$f+vw 0 0 0;
                    display: block;
                    width: fit-content;
                  }
                }
              }
              &.on{
                .show{
                  border-bottom: 1px solid rgba(17, 31, 44, 0.08);
                  .l{
                    p{
                      &:nth-child(1) {
                        font-size: 20/$f+vw;
                        color: #000;
                      }
                    }
                  }
                  img{
                    transform: rotate(0);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .appropriate{
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 229/$f+vw;
    z-index: 1;
    .bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .wrap{
      width: 1320/$f+vw;
      display: flex;
      align-items: center;
      position: relative;
      top: 20/$f+vw;
      h1{
        color: #FFF;
        font-size: 32/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: 140/$f+vw; /* 437.5% */
        margin: 0 52/$f+vw 0 0;
      }
      .display{
        display: flex;
        align-items: center;
        a{
          text-decoration-line: underline;
        }
        p,a{
          color: #FFF;
          font-family: "PingFang SC";
          font-size: 16/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 140/$f+vw; /* 875% */
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .t{
        font-size: 20px;
      }
      .add{
        bottom:25%;
        img{
          width:20px;
        }
      }
    }
    .types{
      a{
        width: 30%;
        font-size: 14px;
        padding: 10px 0;
        &::after{
          height: 2px;
        }
      }
      span{
        height: 10px;
      }
    }

    .section1{
      &::after{
        height: 503px;
      }
      .wrap{
        width: 90%;
        margin: 30px auto;
        .title{
          flex-direction: column;
          align-items: unset;
          .l{
            flex-direction: column;
            .color{
              width: 30px;
            }
            .pick{
              width: 100%;
              margin: 15px 0 0 0;
              font-size: 14px;
              line-height: 1.7;
            }
          }
          .r{
            font-size: 14px;
            line-height: 1;
            margin: 20px 0;
          }
        }
        .content{
          flex-direction: column;
          .big{
            width: 100%;
            height: auto;
          }
          .small{
            width: 100%;
            height: auto;
            margin: 20px 0 0 0;
            .flex{
              .img{
                width: 48%;
                height: auto;
              }
            }
            .img2{
              height: auto;
              margin: 20px 0 0 0;
            }
          }
        }
      }
    }

    .section2{
      padding: 30px 0;
      .wrap{
        width: 90%;
        .title{
          margin: 0 0 25px;
          h1{
            font-size: 24px;
            margin: 0 0 10px;
            line-height: 1;
            margin: 0 0 15px;
          }
          p{
            font-size: 14px;
            line-height: 1.7;
          }
        }
        .content{
          .cut{
            height: 43px;
            margin: 0 0 20px;
            .list{
              font-size: 13px;
            }
          }
          .flex{
            .matter{
              .item{
                &:not(:last-child) {
                  margin: 0 0 15px;
                }
                .show{
                  height: 43px;
                  padding: 0 5%;
                 .l{
                  p{
                    font-size: 15px !important;
                    line-height: 1;
                    margin: 0;
                    &:nth-child(2) {
                      margin: 0 0 0 80px;
                    }
                  }
                 }
                 img{
                  width: 24px;
                 }
                }
                .hide{
                  &>div{
                    margin: 20px 0 0 5%;
                    span{
                      font-size: 14px;
                      margin: 0 0 10px;
                      line-height: 1;
                      display: block;
                    }
                    p{
                      font-size: 13px;
                      line-height: 2;
                    }
                    a{
                      font-size: 13px;
                      margin: 15px 0 25px 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .appropriate{
      height: 180px;
      .wrap{
        width: 90%;
        flex-direction: column;
        align-items: unset;
        h1{
          font-size: 24px;
          line-height: 1;
          margin: 0 0 15px;
        }
        .display{
          p,a{
            font-size: 13px;
          }
        }
      }
    }
  }
}